<template>
  <div class="demo">
    <div style="position: absolute; top: 0" class="header">
      <!-- 本地导入 -->
      <input style="font-size: 16px" type="file" @change="uploadExcel" />

      <button @click="getData">模拟发送请求获取服务端Excel地址</button>

      <button @click="downloadExcel" style="margin: 0 20px">点击导出</button>
      <button @click="printExcel" style="margin: 0 20px">点击打印</button>
    </div>

    <!-- luckysheet容器 -->
    <div
      id="luckysheet"
      style="
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        left: 0px;
        top: 30px;
        bottom: 0px;
      "
    ></div>
  </div>
</template>

<script>
import LuckyExcel from "luckyexcel";
import { exportExcel } from "../utils/export";
import { getExcel } from "../api/Excel/index";

export default {
  name: "Excel",
  data() {
    return {
      options: {
        container: "luckysheet",
        title: "测试Excel", //表 头名
        lang: "zh", //中文
        showtoolbar: true, //是否显示工具栏
        showinfobar: false, //是否显示顶部信息栏
        showsheetbar: true, //是否显示底部sheet按钮
      },
    };
  },
  mounted() {
    // In some cases, you need to use $nextTick
    // this.$nextTick(() => {
    $(() => {
      luckysheet.create(this.options);
    });
    // });
  },
  methods: {
    // 本地上传
    uploadExcel(evt) {
      const files = evt.target.files;
      if (files == null || files.length == 0) {
        alert("No files wait for import");
        return;
      }
      let name = files[0].name;
      let suffixArr = name.split("."),
        suffix = suffixArr[suffixArr.length - 1];
      if (suffix != "xlsx") {
        alert("Currently only supports the import of xlsx files");
        return;
      }
      LuckyExcel.transformExcelToLucky(
        files[0],
        (exportJson, luckysheetfile) => {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert(
              "Failed to read the content of the excel file, currently does not support xls files!"
            );
            return;
          }
          window.luckysheet.destroy();
          this.options.data = exportJson.sheets;
          window.luckysheet.create(this.options);
        }
      );
    },

    //发送请求获取到后台数据
    getData() {
      //   getExcel().then((res) => {
      //     console.log(res);
      //     // 拿到服务端excel地址 渲染
      //     this.autoImport(res.data);
      //   });

      // 模拟请求
      setTimeout(() => {
        // 拿到服务端excel地址
        var value =
          "http://120.78.186.60:8085/localClothingBaoJiaDan/BJD2020121711-001.xlsx";
        this.autoImport(value);
      }, 1000);
    },

    //渲染封装 自动导入Excel数据
    autoImport(value) {
      LuckyExcel.transformExcelToLuckyByUrl(
        value,
        name,
        (exportJson, luckysheetfile) => {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert(
              "Failed to read the content of the excel file, currently does not support xls files!"
            );
            return;
          }
          window.luckysheet.destroy();
          this.options.data = exportJson.sheets;
          window.luckysheet.create(this.options);
        }
      );
    },

    // 导出到本地
    downloadExcel() {
      // console.log(luckysheet.getAllSheets())
      exportExcel(luckysheet.getAllSheets(), "test");
    },

    // 打印实现
    printExcel() {
      //  找到需要隐藏的DOM节点
      $(".header").addClass("printHideCss");
      window.print();
      $(".header").removeClass("printHideCss");
      //  window.location.reload();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
* {
  margin: 0;
  padding: 0;
}
.printHideCss {
  visibility: hidden !important;
}
</style>
